<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<comp-quick-navigation v-bind="{data:data}" @cutover="cutover" @map_power="map_power" @to_dial="to_dial" @openWxapp="openWxapp"></comp-quick-navigation>
			<view class="body after-navber">
				<specifications-model v-bind="{data:data}" @previewImage="previewImage" @hideAttrPicker="hideAttrPicker" @groupCheck="groupCheck" @attrNumClick="attrNumClick" @dappAttrClick="dappAttrClick" @numberSub="numberSub" @numberBlur="numberBlur" @numberAdd="numberAdd"></specifications-model>
				<view :class="data.show_attr_picker?'no-scroll':''">
					<goods-banner v-bind="{data:data}" @hide="hide" @onGoodsImageClick="onGoodsImageClick" @play="play"></goods-banner>
					<goods-info v-bind="{data:data}" @showDialogBtn="showDialogBtn" @jian="jian" @goodNumChange="goodNumChange" @jia="jia" @showShareModal="showShareModal" @showAttrPicker="showAttrPicker" @getGoodsQrcode="getGoodsQrcode" @shareModalClose="shareModalClose" @close="close" @goodsQrcodeClick="goodsQrcodeClick" @saveGoodsQrcode="saveGoodsQrcode" @goodsQrcodeClose="goodsQrcodeClose" @onShareWebMessage="onShareWebMessage"></goods-info>
            <view class="shop" v-if="data.goods.shopListNum>0">
                <view class="shop-title flex-y-center">
                    门店信息
                </view>
                <view class="shop-info">
                    <view class="shop-name">
                        {{data.shop[0].name}}
                    </view>
                    <view class="shop-addres">
                        地址：{{data.shop[0].address}}
                    </view>
                    <view class="shop-time">
                        营业时间：{{data.shop[0].shop_time?data.shop[0].shop_time:'7 x 24'}}
                    </view>
                </view>
                <view @tap="goToShopList" class="all-shop flex-row flex-y-center">
                    <view class="shop-text flex-grow-1 flex-y-center">
                        查看全部{{data.goods.shopListNum}}家分店
                    </view>
                    <view class="shop-more flex-grow-0 flex-y-center">
                        <image class="icon_img" :src="data.__wxapp_img.share.right.url"></image>
                    </view>
                </view>
            </view>
            <view class="tab-group">
                <view class="flex-row tab-group-header">
                    <view @tap="tabSwitch" :class="['flex-grow-1 flex-x-center tab-group-item', data.tab_detail]" data-tab="detail">
                        <text class="flex-y-center">预约详情</text>
                    </view>
                    <view @tap="tabSwitch" :class="['flex-grow-1 flex-x-center tab-group-item', data.tab_comment]" data-tab="comment" v-if="data.__is_comment">
                        <text class="flex-y-center">评价</text>
                    </view>
                </view>
                <view class="tab-group-body">
                    <view :class="['tab-group-item', data.tab_detail]">
                        <view class="goods-detail">
													<wx-parse :myNodes="data.detail.nodes"></wx-parse>
                        </view>
                    </view>
                    <view :class="['tab-group-item', data.tab_comment]">
                        <view class="comment-count flex-row">
                            <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                <view>全部</view>
                                <view>({{data.comment_count.score_all>999?'999+':data.comment_count.score_all}})</view>
                            </view>
                            <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                <view>好评</view>
                                <view>({{data.comment_count.score_3>999?'999+':data.comment_count.score_3}})</view>
                            </view>
                            <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                <view>中评</view>
                                <view>({{data.comment_count.score_2>999?'999+':data.comment_count.score_2}})</view>
                            </view>
                            <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                <view>差评</view>
                                <view>({{data.comment_count.score_1>999?'999+':data.comment_count.score_1}})</view>
                            </view>
                        </view>
                        <view class="comment-list">
                            <view class="comment-item flex-row" v-for="(item,index) in data.comment_list" :key="item.id">
                                <view class="flex-grow-0" style="overflow: visible">
                                    <image mode="aspectFill" :src="item.avatar_url" style="width: 70upx;height: 70upx;border-radius: 1000upx"></image>
                                </view>
                                <view class="flex-grow-1">
                                    <view class="flex-row mb-20">
                                        <view class="flex-grow-1 flex-y-center nickname">{{item.nickname}}</view>
                                        <view class="flex-grow-0 flex-y-center addtime">{{item.addtime}}</view>
                                    </view>
                                    <view class="mb-20">{{item.content}}</view>
                                    <view class="pic-list" v-if="item.pic_list&&item.pic_list.length>0">
                                        <image @tap="commentPicView" class="pic-item" :data-index="index" :data-pic-index="pic_index" mode="aspectFill" :src="pic" v-for="(pic,pic_index) in item.pic_list" :key="pic.id"></image>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
						<goods-buy v-bind="{data:data}" @goHome="goHome" @favoriteRemove="favoriteRemove" @favoriteAdd="favoriteAdd" @kfMessage="kfMessage" @callPhone="callPhone" @addCart="addCart" @buyNow="buyNow" @bespeakNow="bespeakNow" @onlyBuy="onlyBuy"></goods-buy>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = require("../../../utils/helper.js"), e = require("../../../wxParse/wxParse.js"), a = require("../../../components/goods/specifications_model.js"), o = require("../../../components/goods/goods_banner.js"), i = require("../../../components/goods/goods_info.js"), s = require("../../../components/goods/goods_buy.js"), n = 1, r = !1, d = !0;
	import specificationsModel from '../../../components/goods/specifications_model.vue';
	import goodsBanner from '../../../components/goods/goods_banner.vue';
	import goodsInfo from '../../../components/goods/goods_info.vue';
	import goodsBuy from '../../../components/goods/goods_buy.vue';
	export default {
		components:{specificationsModel,goodsBanner,goodsInfo,goodsBuy},
		data() {
			return {
				data: {
        pageType: "BOOK",
        hide: "hide",
        form: {
            number: 1
        },
        tab_detail: "active",
        tab_comment: "",
        comment_list: [],
        comment_count: {
            score_all: 0,
            score_3: 0,
            score_2: 0,
            score_1: 0
        },
				goods:{},
				content: {}
    },
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e);
        var a = e.user_id, o = decodeURIComponent(e.scene);
        if (void 0 !== a) a; else if (void 0 !== o) {
            var i = t.scene_decode(o);
            i.uid && i.gid ? (i.uid, e.id = i.gid) : o;
        } else if (null !== myVue.getApp.query) {
            var s = myVue.getApp.query;
            myVue.getApp.query = null, e.id = s.gid, s.uid;
        }
        this.setData({
            id: e.id
        }), n = 1, this.getGoodsInfo(e), this.getCommentList(!1);
    },
    onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this), a.init(this), o.init(this), i.init(this), s.init(this);
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(t) {
        myVue.getApp.page.onReachBottom(this), this.getCommentList(!0);
    },
    onShareAppMessage: function(t) {
        myVue.getApp.page.onShareAppMessage(this);
        var e = this, a = myVue.getApp.core.getStorageSync(myVue.getApp.const.USER_INFO);
        return {
            title: e.data.goods.name,
            path: "/pages/book/details/details?id=" + e.data.goods.id + "&user_id=" + a.id,
            imageUrl: e.data.goods.pic_list[0],
            success: function(t) {}
        };
    },
		methods: {
			getGoodsInfo: function(t) {
        var a = t.id, o = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.book.details,
            method: "get",
            data: {
                gid: a
            },
            success: function(t) {
                if (0 == t.code) {
                    var a = t.data.info.detail;
                    e.wxParse("detail", "html", a, o);
                    var i = parseInt(t.data.info.virtual_sales) + parseInt(t.data.info.sales);
                    t.data.attr_group_list.length <= 0 && (t.data.attr_group_list = [ {
                        attr_group_name: "规格",
                        attr_list: [ {
                            attr_id: 0,
                            attr_name: "默认",
                            checked: !0
                        } ]
                    } ]);
                    var s = t.data.info;
                    s.num = t.data.info.stock, s.min_price = t.data.info.price > .01 ? t.data.info.price : "免费预约", 
                    s.price = t.data.info.price > .01 ? t.data.info.price : "免费预约", s.sales_volume = t.data.info.sales, 
                    s.service_list = t.data.info.service, o.setData({
                        goods: t.data.info,
                        shop: t.data.shopList,
                        sales: i,
                        attr_group_list: t.data.attr_group_list
                    }), o.selectDefaultAttr();
                } else o.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    showCancel: !1,
                    success: function(t) {
                        t.confirm && o.getApp.core.redirectTo({
                            url: "/pages/book/index/index"
                        });
                    }
                });
            },
            complete: function(t) {
                o.getApp.core.hideLoading();
            }
        });
    },
    tabSwitch: function(t) {
        var e = this;
        "detail" == t.currentTarget.dataset.tab ? e.setData({
            tab_detail: "active",
            tab_comment: ""
        }) : e.setData({
            tab_detail: "",
            tab_comment: "active"
        });
    },
    commentPicView: function(t) {
        var e = this, a = t.currentTarget.dataset.index, o = t.currentTarget.dataset.picIndex;
        myVue.getApp.core.previewImage({
            current: e.data.comment_list[a].pic_list[o],
            urls: e.data.comment_list[a].pic_list
        });
    },
    bespeakNow: function(t) {
        var e = this;
        if (!e.data.show_attr_picker) return e.setData({
            show_attr_picker: !0
        }), !0;
        for (var a = [], o = !0, i = e.data.attr_group_list, s = 0; s < i.length; s++) {
            var n = i[s].attr_list;
            o = !0;
            for (var r = 0; r < n.length; r++) n[r].checked && (a.push({
                attr_group_id: i[s].attr_group_id,
                attr_id: n[r].attr_id,
                attr_group_name: i[s].attr_group_name,
                attr_name: n[r].attr_name
            }), o = !1);
            if (o) return void myVue.getApp.core.showModal({
                title: "提示",
                content: "请选择" + i[s].attr_group_name,
                showCancel: !1
            });
        }
        var d = [ {
            id: e.data.goods.id,
            attr: a
        } ];
        myVue.getApp.core.redirectTo({
            url: "/pages/book/submit/submit?goods_info=" + JSON.stringify(d)
        });
    },
    goToShopList: function(t) {
        myVue.getApp.core.navigateTo({
            url: "/pages/book/shop/shop?ids=" + this.data.goods.shop_id,
            success: function(t) {},
            fail: function(t) {},
            complete: function(t) {}
        });
    },
    getCommentList: function(t) {
        var e = this;
        t && "active" != e.data.tab_comment || r || (r = !0, myVue.getApp.request({
            url: myVue.getApp.api.book.goods_comment,
            data: {
                goods_id: e.data.id,
                page: n
            },
            success: function(a) {
                0 == a.code && (r = !1, n++, e.setData({
                    comment_count: a.data.comment_count,
                    comment_list: t ? e.data.comment_list.concat(a.data.list) : a.data.list
                }), 0 == a.data.list.length && (d = !1));
            }
        }));
    },
		onShareWebMessage: function(t) {
		    var e = this, a = myVue.getApp.core.getStorageSync(myVue.getApp.const.USER_INFO);
				this.$webShare({
					title: e.data.goods.name,
					path: "/pages/book/details/details?id=" + e.data.goods.id + "&user_id=" + a.id,
					imageUrl: e.data.goods.pic_list[0]
				}).then(function() {
					
				})
		},
		},
	}
</script>

<style scoped>

button::after {
    content: normal!important;
}

.page /deep/ .goods-footer-icon {
    border: none;
    background-color: #ffffff;
    border-right: 1upx solid #e2e2e2;
    width: 110upx;
    padding: 16upx;
    font-size: 7pt;
    color: #666666;
    line-height: 1;
    border-radius: 0!important;
    height: 100%;
}


.shop {
    background-color: #ffffff;
    margin-bottom: 20upx;
    padding: 0 24upx;
    font-size: 11pt;
}

.shop .shop-title {
    height: 72upx;
    font-size: 10pt;
    color: #a4a4a4;
    border-bottom: 1upx solid #e2e2e2;
}

.shop .shop-info {
    border-bottom: 1upx solid #e2e2e2;
    padding: 30upx 0;
}

.shop .shop-name {
    margin-bottom: 20upx;
    color: #353535;
}

.shop .shop-addres,.shop-time {
    color: #999999;
}

.shop .all-shop .icon_img {
    width: 16upx;
    height: 26upx;
}

.shop .all-shop {
    color: #00a0e9;
    height: 80upx;
}

.tab-group .tab-group-header {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
}

.tab-group .tab-group-header .tab-group-item text {
    height: 100upx;
    border-bottom: 2upx solid transparent;
}

.tab-group .tab-group-header .tab-group-item.active text {
    color: #ff4544;
    border-bottom-color: #ff4544;
}

.tab-group .tab-group-body .tab-group-item {
    display: none;
}

.tab-group .tab-group-body .tab-group-item.active {
    display: block;
}

.comment-count {
    background: #fff;
    margin-bottom: 20upx;
}

.comment-count .comment-count-item {
    text-align: center;
    padding: 20upx 0;
    font-size: 9pt;
}

.comment-item {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
    padding: 32upx 24upx;
}

.comment-item .nickname {
    padding-left: 24upx;
    height: 70upx;
    font-weight: bolder;
}

.comment-item .addtime {
    color: #888;
}

.comment-item .pic-list {
    margin-left: -8upx;
    margin-top: -8upx;
}

.comment-item .pic-item {
    width: 200upx;
    height: 200upx;
    margin-left: 8upx;
    margin-top: 8upx;
    display: inline-block;
    float: left;
}

.comment-item .score-tag {
    display: inline-block;
    background: #eee;
    font-size: 9pt;
    padding: 4upx 12upx;
    border-radius: 5upx;
}

.tab-group {
    padding-bottom: 100upx;
}

.page /deep/ .goods-detail {
    box-sizing: border-box;
    padding: 24upx 0;
    background: #fff;
}

.page /deep/ .goods-detail text,.page /deep/ .goods-detail image,.page /deep/ .goods-detail view {
    box-sizing: border-box;
    max-width: 100%;
}
</style>
